# Improve Build Performance

Rsbuild optimizes build performance by default, but as the project becomes larger, you may encounter some build performance problems.

This document provides some optional speed-up methods, developers can choose some of them to improve the build performance.

## Performance Profiling

Performing a performance analysis can help you identify performance bottlenecks in your project, allowing for targeted optimization.

Please refer to the [Performance Building Analysis](/guide/debug/build-profiling) section for more information.

## General Optimization

The following are some general optimization methods, which can speed up the development build and production build.

### Use Lightning CSS

Lightning CSS is a high performance CSS parser, transformer and minifier written in Rust. It supports parsing and transforming many modern CSS features into syntax supported by target browsers, and also provides a better compression ratio.

Rsbuild provides the [Lightning CSS Plugin](/plugins/list/plugin-lightningcss) which allows you to use [lightningcss](https://lightningcss.dev/) instead of the built-in `postcss-loader' to compile CSS, reducing the performance overhead of PostCSS and autoprefixer.

For projects with a large number of CSS files, enabling the Lightning CSS plugin can significantly improve overall build performance.

```ts title="rsbuild.config.ts"
import { pluginLightningcss } from '@rsbuild/plugin-lightningcss';

export default {
  plugins: [pluginLightningcss()],
};
```

### Reducing Modules

Optimizing the number of modules referenced by the application can reduce the bundle size and improve build performance. Please read the [Bundle Size Optimization](/guide/optimization/optimize-bundle) section to learn some optimization methods.

## Development optimization

The following are methods for improving development build performance.

## Enable Lazy Compilation

Enabling lazy compilation can significantly reduce the number of modules compiled at dev startup and improve startup time.

```js
export default {
  dev: {
    lazyCompilation: true,
  },
};
```

> Please refer to [dev.lazyCompilation](/config/dev/lazy-compilation) for more information.

### Source Map Format

In order to provide a good debugging experience, Rsbuild uses the `cheap-module-source-map` format source map by default during development, which is a high-quality source map format and will bring certain performance overhead.

You can improve build speed by adjusting the source map format during development through [output.sourceMap](/config/output/source-map).

For example to disable source map:

```js
export default {
  output: {
    sourceMap: {
      js: false,
    },
  },
};
```

Or set the source map format of the development environment to the cheapest `eval` format:

```js
export default {
  output: {
    sourceMap: {
      js: process.env.NODE_ENV === 'development' ? 'eval' : false,
    },
  },
};
```

> For detailed differences between different source map formats, see [Rspack - devtool](https://rspack.dev/config/devtool).

### Browserslist for development

This strategy is similar to ["Adjust Browserslist"](/guide/optimization/optimize-bundle#adjust-browserslist), the difference is that we can set different browserslist for development and production environment, thereby reducing the compilation overhead during development.

For example, you can add the following config to `.browserslistrc`, which means that only the latest browsers are compatible during development, and the actual browsers are compatible in the production environment:

```yaml title=".browserslistrc"
[production]
chrome >= 87
edge >= 88
firefox >= 78
safari >= 14

[development]
last 1 chrome version
last 1 firefox version
last 1 safari version
```

Note that this strategy can lead to some differences in the build result of development production environment.
